<template>
  <!-- 模态框 -->
  <div class="Modal">
    
    <div class="dialog">
      <div class="line"></div>
      <div class="dialog-close" @click="close">
        <img src="@/assets/img/dialog_close.png">
      </div>
      <div class="dialog-title">
        {{title}}
      </div>
      <div class="dialog-body">
        <slot />
      </div> 
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
  },
  methods: {
    close() {
      this.$emit('close')
    }
  },
}
</script>

<style lang="stylus">
.Modal {
  full(fixed);
  flexMiddle(center);
  z-index: 101;
  background: rgba(0,0,0,0.3);
  .dialog {
    height:auto;
    .line {
      border-bottom: 1px solid $border-color;
      width: getPx(50);
      position: absolute;
      right: getPx(-50);
      top: getPx(30);
    }
    .dialog-close {
      cursor: pointer;
      position: absolute; 
      width: getPx(66);
      height: getPx(66);
      right: getPx(-118);
      top: getPx(-5);
      border-radius: 50%;
      border: 1px solid $border-color;
      flexMiddle(center);
      img {
        width: getPx(31);
        height: getPx(31);
        display: block;
      }
    }
    width: 80%;
    min-height: getPx(800);
    background: $sec-bg; 
    border-radius: $radius-sm;
    box-sizing: border-box;
    padding: getPx(30) getPx(40);
    position: relative;
    .dialog-title {
      font-size: $dialog-title-font-size;
    }
  }
  @media screen and (max-height:$h){
    .dialog {
      height:getPx(820);
      min-height:getPx(780);
    }
  }
}
</style>